<template>
    <div class="income-cell">
        <div class="left">
            <p class="money">{{role.toString()=='1'?'-':'+'}}{{cellData.money}}<span class="symbol">元</span></p>
            <div class="line"></div>
        </div>
        <div class="right">
          <p class="light time">{{cellData.time}}</p>
          <p v-if="role.toString()=='2'" class="light details"><span class="name">{{cellData.username}}&nbsp;</span>在您的店里购买了<span class="name">&nbsp;{{cellData.goodName}}&nbsp;</span></p>
          <p v-else class="light details">您在<span class="name">&nbsp;{{cellData.bossname}}&nbsp;</span>购买了<span class="name">&nbsp;{{cellData.goodName}}&nbsp;</span></p>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "income-cell",
  data() {
    return {};
  },
  props: {
    cellData: {
      type: Object,
      default: function() {
        return {
          bossname: "",
          username: "",
          money: 0,
          time: "",
          goodName:''
        };
      }
    }
  },
  components: {},
  activated() {},
  mounted() {},
  computed: {
    ...mapState(["openid", "path", "role"])
  },
  methods: {}
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>

.income-cell {
  width: 100%;
  height: 0.9rem;
  display: flex;
  align-items: center;

  .left {
    flex: 0 0 1.05rem;
    text-align: center;
    position: relative;
    height 100%;

    .money {
      color: #e61874;
      font-size: 0.18rem;
      letter-spacing: 0.005rem;
      line-height 0.9rem;

      .symbol {
        font-size: 0.12rem;
        margin-left: 0.01rem;
      }
    }

    .line {
      top 0;
      position: absolute;
      width: 1px;
      background-color: #f2f2f0;
      height: 100%;
      right 0;
    }
  }

  .right {
    padding-left: 0.08rem;
    padding-right: 0.08rem;
    box-sizing: border-box;

    .light {
      color: #7d7d7d;
      font-size: 0.13rem;
      line-height: 0.17rem;

      .name {
        color: #303030;
        font-weight: 500;
      }

      &.time {
       
      }

      &.details {
        margin-top 0.04rem;
        font-size: 0.14rem;
        line-height: 0.18rem;
      }
    }
  }
}
</style>
